<template>
  <div class="_wz_cent_main rolesAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="110" :rules="ruleValidate">
      <FormItem label="角色名称" prop="roleName">
        <i-input v-model="formData.roleName" placeholder="角色名称" clearable />
      </FormItem>
      <FormItem label="角色标识" prop="roleKey">
        <i-input v-model="formData.roleKey" placeholder="角色标识" clearable />
      </FormItem>
      <FormItem label="备注" prop="comments">
        <i-input v-model="formData.comments" placeholder="备注" clearable type="textarea" :rows="4"/>
      </FormItem>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
        <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
      </div>
    </Form>
  </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'rolesAdd',//组件名称
  components: {},//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup (props,context) {
    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const formAdd = ref()

    const state = reactive({

      formData:{},//表单数据
      ruleValidate: {
        roleName: [{ required: true, message: '请填写角色名称', trigger: 'blur' },],
        roleKey: [{ required: true, message: '请填写角色关键字', trigger: 'blur' },],
      },
    });

    const addSubmit = () => {
      formAdd.value.validate( async (valid) => {
        if (valid) {//正则判断使用
          $ViewUIPlus.Spin.show()
          $axios.post(apiUrl.systemRoleSystemRoleSaveOrUpdate, state.formData).then(res => {
            $ViewUIPlus.Spin.hide()
            if (!!res) {
              $ViewUIPlus.Message.success('保存成功');
              context.emit("closeFun", true)
            }
          }).catch(err => {
            console.log("失败", err)
          })

        } else {
        }
      })
    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      if (!!props.selectData.roleId) {//修改

        state.formData  = props.selectData
      }
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      addSubmit,
      formAdd,
    }
  }
})


</script>
<style lang="less">
.rolesAdd{

}
</style>
